<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易云02:轮播图</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/reset.css">
</head>
<style>
    .banner{
        position: relative;
        width: 100%;
        height: 285px;
        background-color: antiquewhite;
        background-image: url(./images/banner-bg.jpg);
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: center;
        display: flex;
        justify-content: center;
    }
    .banner-main{
        display: flex;
        justify-content: center;
        position: relative;
    }
    .banner-main .banner-img{
        width: 730px;
        height: 285px;
        position: relative;
        overflow: hidden;
    }
    .banner-main .banner-img .img-list{
        position: absolute;
        left: -2px;
        width: auto;
        display: flex;
        justify-content: flex-start;
        animation-name: banner;
        animation-duration: 30s;
        animation-iteration-count: infinite;
    }
    @keyframes banner {
        0%{
            left:0px;
        }
        33%{
            left:-730px
        }
        66%{
            left:-1460px
        }
    }
    .banner-main .banner-img .img-list li{
        background-color: aqua;
        
    }
    .banner-main .banner-img .img-list li img{
        width: 730px;
        height: 285px;
        vertical-align:middle;
    }
    .banner-main .banner-onload{
        margin-left: -4px;
        width: 254px;
        height: 285px;
        background-color: antiquewhite;
        background-image: url(./images/download-bg.png);
        position: relative;
    }
    .banner-onload a{
        position: absolute;
        margin: 186px 0 0 19px;
        width: 215px;
        height: 56px;
    }
    .banner-onload p{
        color: #8d8d8d;
        position: absolute;
        bottom: 5px;
        width: 100%;
        text-align: center;
    }
    .banner-onload a:hover{
        background: url(./images/download-bg.png) no-repeat 0 -289px;
	width: 215px;
	height: 56px;
    }
    .banner-dian{
        position: absolute;
        bottom: 10px;
        z-index: 10;
        display: flex;
        width: 100%;
        justify-content: center;
    }
    .banner-dian li{
        width: 20px;
        height: 20px;
        background: url(./images/sprite_02.png) no-repeat 2px -344px;
        cursor: pointer;
    }
    .banner-dian li:hover,.banner-dian .ative{
        background-position: -16px -344px;
    }
    .banner-btn-left,.banner-btn-right{
        width: 37px;
        height: 63px;
        position: absolute;
        cursor: pointer;
    }
    .banner-btn-left{
        background: url('./images/sprite_02.png') no-repeat 0 -360px;
	    width: 37px;
	    height: 63px;
        left:-68px;
        top: 50%;
        margin-top: -31px;
    }
    .banner-btn-left:hover{
        background-position: 0 -430px;
    }
    .banner-btn-right{
        background: url('./images/sprite_02.png') no-repeat 0 -508px;
	    width: 37px;
	    height: 63px;
        right:-68px;
        top: 50%;
        margin-top: -31px;
    }
    .banner-btn-right:hover{
        background-position: 0 -578px;
    }
</style>
<body>
    <div class="banner">
        <div class="banner-main">
            <div class="banner-img">
                <ul class="banner-dian">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>               
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <ul class="img-list">
                    <li>
                        <img src="./images/banner.jpg" alt="">
                    </li>
                    <li>
                        <img src="./images/banner-01.jpg" alt="">
                    </li>
                    <li>
                        <img src="./images/banner.jpg" alt="">
                    </li>
                </ul>
            </div>
        <div class="banner-onload">
            <a href="#"></a>
            <p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
        </div>
        <a class="banner-btn-left">
        </a>
        <a class="banner-btn-right"></a>
    </div>
    </div>
</body>
</html>